<template>
  <div class="header">
    <div class="header-container">
      <div class="header-left">
        <span class="changeHover" style="margin-right:52px;">{{titleName}}你好，欢迎来到众茶国际平台</span>
        <template v-if="userInfo && userInfo.id">
          <span class="btn" @click="logout">退出</span>
        </template>
        <template v-else > 
          <span class="btn" @click="toLogin(0)">登录</span>
          <span class="line">|</span>
          <span class="btn" @click="toLogin(1)">注册</span>
        </template>
        <span class="line">|</span>
        <span class="btn" @click="$router.push('/front-about')">关于众茶国际</span>
        <span class="line">|</span>
        <span style="color: rgb(15, 131, 193);" class="btn" @click="$router.push('/')">众茶国际首页</span>
      </div>
      <div class="header-rigth">
        <el-badge v-if="userInfo && userInfo.id" :value="unreadCount" class="item">
          <span class="message" @click="handleMessage">消息</span>
        </el-badge>
        <span class="btn" @click="toBackend">我的工作台</span>
       <!-- <span class="line">|</span> -->
        <!-- <span class="btn" @click="$router.push('/cart')">我的购物车</span> -->
        <span class="line">|</span>
        <!-- <span class="btn">下载众茶国际App</span> -->
        <el-popover
          placement="bottom"
          width="150"
          trigger="hover">
          <el-image style="width: 120px" :src="require('../../../assets/front-img/qrCode.png')"></el-image>
          <span slot="reference" class="btn">下载众茶通App</span>
        </el-popover>
        <span class="line">|</span>
        <img style="" src="../../../assets/front-img/phone.png">
        <span style="margin-left: 10px" class="btn">客服热线：400-0629-666</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getToken } from "@/utils/auth";
import { friendList } from '@/api/user'
export default {
  data() {
    return {
      searchValue: "",
      titleName:"",
      unreadCount: ''
    };
  },
  created() {
    this.updateTitleName();
    this.updateMessage()
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    toLogin(type) {
			// 执行的方法
			// 1 注册 0 登录
			if(type==1){
				this.$emit('showRegister')
			} else {
				this.$emit('showLogin')
			}
      const redirect = this.$route.fullPath;
      this.$router.push({ path: `/login?redirect=${redirect}&type=${type}` });
    },
    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
      WebIM.conn.close();
    },
    toBackend() {
      this.$router.push({
        path: this.getFirstRouter(this.$store.state.permission.addRoutes)
      });
    },
    getFirstRouter(routers) {
      let router = "";
      function findChildren(routers) {
        router += router ? "/" + routers.path : routers.path;
        if (routers.children && routers.children.length > 0) {
          findChildren(routers.children[0]);
        }
      }
      //此处长度为1时是404页面，也不取
      if (routers && routers.length > 1) {
        findChildren(routers[0]);
      } else {
        router = "/profile/index";
      }
      return router;
    },
    updateTitleName() {
      let userInfo = Object.assign({}, this.$store.getters.userInfo);
      if (userInfo && userInfo.id) {
        let type = userInfo.type === 1 ? '采购商' : '供应商';
        
        if (userInfo.name) {
          this.titleName = `（${type}）${userInfo.name}，`
        } else {
          this.titleName = `${type}，`;
        }
      } else {
        this.titleName = "";
      }
    },
    handleMessage() {
      let url = 'https://chat.utea88.com/?token=' + getToken()
      window.open(url, '_blank');
    },
    updateMessage() {
      if (getToken() && getToken().length > 0) {
        friendList().then(res => {
          if (res.unreadTotalCount > 0) {
            this.unreadCount = res.unreadTotalCount
          } else {
            this.unreadCount = ''
          }
        }).catch(err => {
          console.log(err)
        })
      }
      
      let that = this
      setTimeout(() => {
        that.updateMessage()
      }, 3000);
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  border-bottom: 1px solid #e5e5e5;
  height: 40px;
  background: rgba(239, 242, 246, 1);

  .header-container {
    color: #282828;
    margin: 0 auto;
    width: 1300px;
    height: 100%;
    line-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    .line {
      padding: 0 9px;
    }
    .noLine {
      margin-right: 50px;
    }
  }
}

.btn {
  @include mainColorBtn;
  cursor: pointer;
  font-size: 12px;
  color: rgba(102, 102, 102, 1);
}

.changeHover {
  @include mainColorBtn;
  font-size: 12px;
  color: rgba(102, 102, 102, 1);
}

.el-badge {
  margin-right: 15px;
  cursor: pointer;
  font-size: 12px !important;
  color: rgba(102, 102, 102, 1);
  ::v-deep .el-badge__content {
    margin-top:14px;
  }
}
</style>